TypeScript 在 JavaScript 基礎上提供了強大的靜態型別系統和編譯階段錯誤檢查功能。然而，TypeScript 的強大功能不僅限於型別檢查，還有許多實用工具和插件可以進一步提升開發的體驗。在這篇文章中，我將介紹一些常見的 TypeScript 實用工具和插件，並通過簡單的範例展示它們的用法。

一、TypeScript 的內建實用工具型別

TypeScript 提供了許多內建的工具型別（Utility Types），這些工具型別可以幫助我們快速操作和轉換型別。

1. Partial<T>

Partial<T> 是一個非常實用的工具型別，它將物件型別中的所有屬性設為可選 (optional)。這在需要對部分屬性進行更新時非常有用。

interface User {
  id: number;
  name: string;
  email: string;
}

function updateUser(id: number, updates: Partial<User>) {
  // 更新使用者邏輯
}

updateUser(1, { name: "New Name" });  // 只更新 name 屬性

在這裡，我們使用 Partial<User> 來允許更新物件中的部分屬性，而不是要求所有屬性都必須提供。

2. Pick<T, K>

Pick<T, K> 用來從一個型別中選取特定屬性，這對於只需要物件型別中的部分屬性時非常實用。

interface User {
  id: number;
  name: string;
  email: string;
}

type UserName = Pick<User, "name">;

const userName: UserName = { name: "Annie" };

在這裡，我們使用 Pick 型別只選取了 User 中的 name 屬性，適合場景是我們只關心部分屬性時。

3. Omit<T, K>

Omit<T, K> 與 Pick 相反，用來排除指定的屬性。這在你想要保留大部分屬性，卻排除某些不需要的屬性時非常有用。

interface User {
  id: number;
  name: string;
  email: string;
}

type UserWithoutEmail = Omit<User, "email">;

const userWithoutEmail: UserWithoutEmail = { id: 1, name: "Annie" };

在這裡，我們排除了 email 屬性，這樣可以創建沒有 email 的 User 型別。

4. Required<T>

Required<T> 會將型別中的所有可選屬性變成必填屬性。這可以強制要求使用者在某些情況下提供所有屬性。

interface User {
  id: number;
  name?: string;
  email?: string;
}

type RequiredUser = Required<User>;

const user: RequiredUser = {
  id: 1,
  name: "Annie",
  email: "annie@example.com"
};  // 所有屬性都變成了必填

Required 工具型別將 User 中的可選屬性轉變為必須提供的屬性。

二、TypeScript 編譯器選項（tsconfig.json）

tsconfig.json 是 TypeScript 的配置檔案，它允許你自定義 TypeScript 的行為，從而優化開發體驗。

1. strict 模式

strict 是 TypeScript 中非常有用的配置，它會開啟一系列的嚴格檢查，協助提前發現潛在的錯誤。

{
  "compilerOptions": {
    "strict": true
  }
}

啟用 strict 模式後，TypeScript 會強制檢查 null 和 undefined、函數返回值、變數初始化等。這樣就可以寫出更安全的程式碼。

2. paths 和 baseUrl

這兩個選項可以幫助我們配置模組路徑的解析方式，從而使得引入模組的路徑更簡潔。

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["src/components/*"]
    }
  }
}

以上述例子來說，就可以用 @components/Button 來代替繁瑣的相對路徑 ../../src/components/Button，使得程式碼更清晰易讀。

三、TypeScript 插件

在開發過程中，有一些工具和編輯器插件可以與 TypeScript 無縫結合，進一步提升開發效率。

1. ESLint 與 TypeScript 整合

ESLint 是一個流行的程式碼檢查工具，它可以幫助我們確保程式碼風格一致並避免常見錯誤。我們可以安裝 ESLint 與 TypeScript 的整合插件，來進行 TypeScript 程式碼的靜態檢查。

首先，安裝相關依賴：

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

然後，在 .eslintrc.json 中進行配置：

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "off"
  }
}

這樣，可以在編輯器中即時檢查 TypeScript 程式碼的問題，並提供修正建議。

2. Prettier 與 TypeScript 格式化

Prettier 是一個強大的程式碼格式化工具，能夠自動幫助我們整理程式碼，保持統一風格。你可以將 Prettier 與 TypeScript 結合，確保 TypeScript 程式碼的格式一致。

首先，安裝 Prettier：

npm install --save-dev prettier

然後創建一個 .prettierrc 文件，配置格式化規則：

{
  "singleQuote": true,
  "trailingComma": "all"
}

最後，可以在保存 TypeScript 文件時自動應用 Prettier 進行格式化。

3. VSCode 的 TypeScript 插件

VSCode 是 TypeScript 的官方支援編輯器，它有許多實用的 TypeScript 插件。以下是幾個推薦的插件：

• TypeScript Hero：幫助自動導入和優化 TypeScript 模組。
• TSLint：用來進行 TypeScript 的靜態檢查，類似於 ESLint，但專門為 TypeScript 優化。

安裝這些插件後，VSCode 可以更智能地提示型別錯誤、補全代碼並提供即時的型別檢查。

四、實用範例

讓我們來看一個綜合運用工具型別和插件的簡單範例。假設我們有一個 User 型別，我們想要定義一個函數來更新用戶資料，但允許部分更新。

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

// 使用 Partial<T> 工具型別來允許部分更新
function updateUser(id: number, updates: Partial<User>) {
  // 這裡可以更新用戶的部分屬性
  console.log(`Updating user with ID ${id}`, updates);
}

// 呼叫 updateUser，僅更新 name
updateUser(1, { name: "Annie" });

// 呼叫 updateUser，僅更新 email
updateUser(1, { email: "annie@ithelp.com" });

在這個範例中，利用 Partial<T> 工具型別來讓 updateUser 函數可以接收部分更新的屬性。同時，通過使用 ESLint 和 Prettier 插件，我們可以保證代碼風格一致，並及時檢查代碼中的錯誤。